<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>登录</title>
        <style type="text/css">
            h3 {
                text-align: center;
            }
            .wrapper {
                width: 60vw;
                border: 1px solid gray;
                margin: 15px auto;
            }
            form {
                border: 1px solid blue;
            }

            .form-row {
                display: flex;
                justify-content: space-between;
                height: 50px;
                border: 1px solid #dfdfdf;
                border-radius: 5px;
                margin: 15px;
                line-height: 50px;
            }

            .form-row>span:first-child {
                flex-basis: 20%;
                text-align: center;
                background: #f4f4f4;
                user-select: none;
            }
            .form-row>span:last-child {
                flex-basis: 78%;
                background: #ffffff;
            }

            .form-row input[type=text],
            .form-row input[type=password] {
                width: 80%;
                height: 40px;
                border: none;
                outline: none;
                background: transparent;
            }

            .form-submit-button {
                display: flex;
                height: 50px;
                margin: 15px;
            }

            .form-submit-button>button {
                flex: auto;
                font-size: 1.5rem;
            }
        </style>
    </head>
    <body>
        
        <h3>登录</h3>
        <div class="wrapper">
            <form action="" method="get" target="_self">
                <div class="form-row">
                    <span>
                        <label for="username">登录名称:</label>
                    </span>
                    <span>
                        <input type="text" name="username" id="username" placeholder="请输入登录名称" autocomplete="off">
                    </span>
                </div>

                <div class="form-row">
                    <span>
                        <label for="password">登录密码:</label>
                    </span>
                    <span>
                        <input type="password" name="password" id="password" placeholder="请输入登录密码">
                    </span>
                </div>

                <div class="form-submit-button">
                    <button type="submit">登录</button>
                </div>
            </form>
        </div>

    </body>
</html>